<template>
  <div v-loading="loading" class="main">
    <template v-if="active == 5 && certificationstatus === 1">
      <el-form
        class="tabsBox"
        :model="formSettled"
        label-width="200px"
        size="mini"
        top="50px"
      >
        <h3 class="thrTitle">公司及联系人信息</h3>
        <el-form-item label="公司名称：" prop="companyname">
          <span>{{ formSettled.companyname }}</span>
        </el-form-item>
        <el-form-item label="公司所在地：" prop="county">
          <span>{{ formSettled.province }} / </span>
          <span>{{ formSettled.city }} / </span>
          <span>{{ formSettled.county }}</span>
        </el-form-item>
        <el-form-item label="公司详细地址：" prop="address">
          <span>{{ formSettled.address }}</span>
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <span>{{ formSettled.email }}</span>
        </el-form-item>
        <el-form-item label="公司电话：" prop="companyphone">
          <span>{{ formSettled.companyphone }}</span>
        </el-form-item>
        <el-form-item label="联系人姓名：" prop="contactname">
          <span>{{ formSettled.contactname }}</span>
        </el-form-item>
        <el-form-item label="联系人电话：" prop="contactphone">
          <span>{{ formSettled.contactphone }}</span>
        </el-form-item>
        <el-form-item label="员工总数（人）：" prop="totalstaff">
          <span>{{ formSettled.totalstaff }}</span>
        </el-form-item>
        <el-form-item
          label="注册资金（万元）："
          type="number"
          prop="registeredcapital"
        >
          <span>{{ formSettled.registeredcapital }}</span>
        </el-form-item>
        <h3 class="thrTitle">营业执照信息（副本）</h3>
        <el-form-item label="营业执照号：" prop="businesslicensenumber">
          <span>{{ formSettled.businesslicensenumber }}</span>
        </el-form-item>
        <el-form-item label="营业执照有效期：" prop="businesslicenseindate">
          <span>{{ formSettled.businesslicenseindate }}</span>
        </el-form-item>
        <el-form-item label="营业执照电子版：" prop="businesslicenseurl">
          <el-popover placement="right" trigger="click">
            <img
              :src="formSettled.businesslicenseurl"
              style="max-width: 1000px; max-height: 90vh; border-radius: 3px"
            />
            <div slot="reference" class="imgBox">
              <img :src="formSettled.businesslicenseurl" />
              <p @click.stop>营业执照电子版</p>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item label="授权代表证明：" prop="authorizationcertificate">
          <el-popover placement="right" trigger="click">
            <img
              :src="formSettled.authorizationcertificate"
              style="max-width: 1000px; max-height: 90vh; border-radius: 3px"
            />
            <div slot="reference" class="imgBox">
              <img :src="formSettled.authorizationcertificate" />
              <p @click.stop>授权代表证明</p>
            </div>
          </el-popover>
        </el-form-item>
        <el-form-item label="一般纳税人证明：" prop="taxpayercertificateurl">
          <el-popover placement="right" trigger="click">
            <img
              :src="formSettled.taxpayercertificateurl"
              style="max-width: 1000px; max-height: 90vh; border-radius: 3px"
            />
            <div slot="reference" class="imgBox">
              <img :src="formSettled.taxpayercertificateurl" />
              <p @click.stop>一般纳税人证明</p>
            </div>
          </el-popover>
        </el-form-item>
        <h3 class="thrTitle">开户银行信息</h3>
        <el-form-item label="银行开户名：" prop="accountname">
          <span>{{ formSettled.accountname }}</span>
        </el-form-item>
        <el-form-item label="公司银行账号：" prop="accountnumber">
          <span>{{ formSettled.accountnumber }}</span>
        </el-form-item>
        <el-form-item label="开户银行支行名称：" prop="subbranchname">
          <span>{{ formSettled.subbranchname }}</span>
        </el-form-item>
        <!-- <el-form-item label="支行联行号：" prop="affiliatedbanknumber">
          <span>{{ formSettled.affiliatedbanknumber }}</span>
        </el-form-item> -->
        <el-form-item label="开户银行所在地：" prop="bankaddress">
          <span>{{ formSettled.bankaddress }}</span>
        </el-form-item>
        <!-- <el-form-item label="开户银行许可证电子版：" prop="banklicenceurl">
          <el-popover placement="right" trigger="click">
            <img
              :src="formSettled.banklicenceurl"
              style="max-width: 1000px; max-height: 90vh; border-radius: 3px"
            />
            <div slot="reference" class="imgBox">
              <img :src="formSettled.banklicenceurl" />
              <p @click.stop>开户银行许可证电子版</p>
            </div>
          </el-popover>
        </el-form-item> -->
        <h3 class="thrTitle">支付宝</h3>
        <el-form-item label="支付宝姓名：" prop="alipayname">
          <span>{{ formSettled.alipayname }}</span>
        </el-form-item>
        <el-form-item label="支付宝账号：" prop="alipaynumber">
          <span>{{ formSettled.alipaynumber }}</span>
        </el-form-item>
        <h3 class="thrTitle">微信</h3>
        <el-form-item label="微信姓名：" prop="wechatname">
          <span>{{ formSettled.wechatname }}</span>
        </el-form-item>
        <el-form-item label="微信账号：" prop="wechatnumber">
          <span>{{ formSettled.wechatnumber }}</span>
        </el-form-item>
        <h3 class="thrTitle">店铺经营信息</h3>
        <el-form-item label="店铺名称：" prop="storename">
          <span>{{ formSettled.storename }}</span>
        </el-form-item>
        <el-form-item label="商品类目：" prop="categoryid">
          <span>{{ formSettled.topcategoryname }} / </span>
          <span>{{ formSettled.secondarycategoryname }} / </span>
          <span>{{ formSettled.thirdcategoryname }}</span>
        </el-form-item>
        <el-form-item label="经营方式：" prop="templateType">
          <span>{{ formSettled.templatetype | getTemplateTyep }}</span>
        </el-form-item>
        <div v-if="categoryTemplate != [] && categoryTemplate != null">
          <h3 class="thrTitle">{{ categoryTemplate.name }}</h3>
          <el-form-item
            :label="item.fieldname + '：'"
            v-for="item in categoryTemplate.templateItemFormList"
            :key="item.id"
          >
            <span v-if="item.fieldtype != '图片'">{{ item.fieldvalue }}</span>
            <el-popover placement="right" trigger="click" v-else>
              <img
                :src="item.fieldvalue"
                style="max-width: 1000px; max-height: 90vh; border-radius: 3px"
              />
              <div slot="reference" class="imgBox">
                <img :src="item.fieldvalue" />
                <p @click.stop>{{ item.fieldname }}</p>
              </div>
            </el-popover>
          </el-form-item>
        </div>
      </el-form>
    </template>
    <template v-else>
      <el-button
        class="rebutBtn"
        type="danger"
        plain
        @click="dialogVisible = true"
        v-if="certificationstatus === 2"
        >查看驳回信息</el-button
      >
      <el-steps :active="active" align-center>
        <el-step :title="item" icon="" v-for="item in titleList" :key="item">{{
          item
        }}</el-step>
        <!-- <el-step :title="titleList[0]">签订入驻协议</el-step>
                <el-step :title="titleList[1]">编辑财务资质信息</el-step>
                <el-step :title="titleList[2]">编辑店铺经营信息</el-step>
                <el-step :title="titleList[3]">店铺经营信息，商品品牌认证</el-step>
                <el-step :title="titleList[4]">信息提交</el-step> -->
      </el-steps>
      <ul class="tabsBox">
        <!-- 开店协议 -->
        <li v-show="active == 0">
          <h2 class="sendTitle">金天合纵商城入驻协议</h2>
          <p style="color: #e6a23c; text-align: center">请阅读时间不低于10秒</p>
          <div
            class="agreementBox"
            v-html="settlementAgreement.agreementcontent"
          ></div>
          <div v-show="active != 4" style="text-align: center">
            <el-checkbox
              :disabled="disabled"
              style="margin: 20px auto"
              v-model="agreementChecked"
              >我已阅读并同意以上协议</el-checkbox
            >
          </div>
          <div class="line"></div>
          <el-button
            v-show="active != 4"
            style="display: block; margin: 12px auto"
            @click="consentGgreement"
            >企业入驻</el-button
          >
        </li>
        <li v-show="active == 1 || active == 4">
          <el-alert
            v-show="active != 4"
            title="注意事项：以下需要上传的电子版资质文件仅支持JPG/GIF/PNG格式图片，文件大小请控制在1M左右"
            type="warning"
            style="margin: 0 auto 20px"
            :closable="false"
          >
          </el-alert>
          <el-form
            :model="formData2"
            :rules="rules2"
            style="width: 900px"
            ref="formData2"
            label-width="200px"
            class="demo-ruleForm"
          >
            <h3 class="thrTitle">公司及联系人信息</h3>
            <el-form-item label="公司名称：" prop="companyname">
              <el-input
                :disabled="true"
                v-model="formData2.companyname"
              ></el-input>
            </el-form-item>
            <el-form-item label="公司所在地：" prop="county">
              <el-select
                v-model="formData2.province"
                @change="selectProvince(formData2.province)"
                placeholder="请选择省"
              >
                <el-option
                  v-for="item in provinces"
                  :key="item.areaid"
                  :label="item.areaname"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                v-model="formData2.city"
                @change="selectCity(formData2.city)"
                placeholder="请选择市"
              >
                <el-option
                  v-for="item in citys"
                  :key="item.areaid"
                  :label="item.areaname"
                  :value="item"
                ></el-option>
              </el-select>
              <el-select
                v-model="formData2.county"
                @change="selectCounty(formData2.county)"
                placeholder="请选择区/县"
              >
                <el-option
                  v-for="item in countys"
                  :key="item.areaid"
                  :label="item.areaname"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="公司详细地址：" prop="address">
              <el-input v-model="formData2.address"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱：" prop="email">
              <el-input v-model="formData2.email"></el-input>
            </el-form-item>
            <el-form-item label="公司电话：" prop="companyphone">
              <el-input v-model="formData2.companyphone"></el-input>
            </el-form-item>
            <el-form-item label="联系人姓名：" prop="contactname">
              <el-input v-model="formData2.contactname"></el-input>
            </el-form-item>
            <el-form-item label="联系人电话：" prop="contactphone">
              <el-input v-model="formData2.contactphone"></el-input>
            </el-form-item>
            <el-form-item label="员工总数（人）：" prop="totalstaff">
              <el-input type="number" v-model="formData2.totalstaff"></el-input>
            </el-form-item>
            <el-form-item label="注册资金（万元）：" prop="registeredcapital">
              <el-input
                type="number"
                v-model="formData2.registeredcapital"
              ></el-input>
            </el-form-item>
            <h3 class="thrTitle">营业执照信息（副本）</h3>
            <el-form-item label="营业执照号：" prop="businesslicensenumber">
              <el-input v-model="formData2.businesslicensenumber"></el-input>
            </el-form-item>
            <el-form-item label="营业执有效期：" prop="islongterm">
              <el-select v-model="formData2.islongterm" placeholder="请选择">
                <el-option
                  v-for="(item, index) in ['短期', '长期']"
                  :key="index"
                  :label="item"
                  :value="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-show="formData2.islongterm !== 1"
              prop="businesslicenseindate"
            >
              <span slot="label"
                ><span style="color: red" v-if="formData2.islongterm !== 1"
                  >* </span
                >{{
                  formData2.islongterm !== 1
                    ? "营业执照有效期："
                    : "营业执照开始日期："
                }}</span
              >
              <el-date-picker
                v-show="formData2.islongterm !== 1"
                v-model="formData2.businesslicenseindate"
                unlink-panels
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              :label="
                formData2.islongterm !== 1
                  ? '营业执照有效期：'
                  : '营业执照开始日期：'
              "
              v-if="formData2.islongterm == 1"
              prop="businesslicenseindate1"
            >
              <el-date-picker
                v-show="formData2.islongterm == 1"
                v-model="formData2.businesslicenseindate1"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="营业执照电子版：" prop="businesslicenseurl">
              <p style="color: #e6a23c">
                请确保图片清晰，文字可辩并有清晰的红色公章
              </p>
              <el-upload
                class="avatar-uploader"
                :beforeUpload="beforeAvatarUpload"
                :action="uploadUrl"
                :on-change="(file) => handleChange(file)"
                list-type="picture-card"
                :on-success="
                  (response, file, fileList) =>
                    handleSuccess(
                      response,
                      file,
                      fileList,
                      'formData2',
                      'businesslicenseurl'
                    )
                "
                :on-remove="
                  (file, fileList) =>
                    handlePicRemove(
                      file,
                      fileList,
                      'formData2',
                      'businesslicenseurl'
                    )
                "
                :show-file-list="false"
              >
                <img
                  v-if="formData2.businesslicenseurl"
                  :src="formData2.businesslicenseurl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

            <el-form-item
              label="授权代表证明："
              prop="authorizationcertificate"
            >
              <p style="color: #e6a23c">
                请确保图片清晰，文字可辩并有清晰的红色公章
              </p>
              <el-upload
                class="avatar-uploader"
                :beforeUpload="beforeAvatarUpload"
                :action="uploadUrl"
                :on-change="(file) => handleChange(file)"
                list-type="picture-card"
                :on-success="
                  (response, file, fileList) =>
                    handleSuccess(
                      response,
                      file,
                      fileList,
                      'formData2',
                      'authorizationcertificate'
                    )
                "
                :on-remove="
                  (file, fileList) =>
                    handlePicRemove(
                      file,
                      fileList,
                      'formData2',
                      'authorizationcertificate'
                    )
                "
                :show-file-list="false"
              >
                <img
                  v-if="formData2.authorizationcertificate"
                  :src="formData2.authorizationcertificate"
                  class="avatar"
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>

            <el-form-item
              label="一般纳税人证明："
              prop="taxpayercertificateurl"
            >
              <p style="color: #e6a23c">
                请确保图片清晰，文字可辩并有清晰的红色公章
              </p>

              <el-upload
                class="avatar-uploader"
                :beforeUpload="beforeAvatarUpload"
                :action="uploadUrl"
                :on-change="(file) => handleChange(file)"
                list-type="picture-card"
                :on-success="
                  (response, file, fileList) =>
                    handleSuccess(
                      response,
                      file,
                      fileList,
                      'formData2',
                      'taxpayercertificateurl'
                    )
                "
                :on-remove="
                  (file, fileList) =>
                    handlePicRemove(
                      file,
                      fileList,
                      'formData2',
                      'taxpayercertificateurl'
                    )
                "
                :show-file-list="false"
              >
                <img
                  v-if="formData2.taxpayercertificateurl"
                  :src="formData2.taxpayercertificateurl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
              <el-alert
                v-show="active != 4"
                title="注意事项："
                type="error"
                style="margin: 20px auto"
                :closable="false"
              >
                所属企业具有一般纳税人证明时，此项为必填
              </el-alert>
            </el-form-item>
            <el-form-item v-show="active != 4">
              <el-button
                style="margin-top: 12px"
                @click="submitFinancialQualification"
                >下一步，{{ titleList[2] }}</el-button
              >
            </el-form-item>
          </el-form>
        </li>
        <li v-show="active == 2 || active == 4">
          <el-alert
            v-show="active != 4"
            title="注意事项："
            type="warning"
            style="margin: 0 auto 20px"
            :closable="false"
          >
            以下需要上传的电子版资质文件仅支持JPG/GIF/PNG格式图片，文件大小请控制在1M左右
          </el-alert>
          <el-form
            :model="formData3"
            :rules="rules3"
            style="width: 900px"
            ref="formData3"
            label-width="200px"
            class="demo-ruleForm"
          >
            <div style="margin-bottom: 60px">
              <h3 class="thrTitle" style="display: inline">开户银行信息</h3>
              <span style="color: red; margin-left: 70px; font-size: 16px"
                >注意：请填写您公司的对公账户，用于您在金天合纵平台的提现</span
              >
            </div>
            <el-form-item label="银行开户名：" prop="accountname">
              <el-input v-model="formData3.accountname"></el-input>
            </el-form-item>
            <el-form-item label="公司银行账号：" prop="accountnumber">
              <el-input v-model="formData3.accountnumber"></el-input>
            </el-form-item>
            <el-form-item label="开户银行支行名称：" prop="subbranchname">
              <el-input v-model="formData3.subbranchname"></el-input>
            </el-form-item>
            <!-- <el-form-item label="支行联行号：" prop="affiliatedbanknumber">
              <el-input v-model="formData3.affiliatedbanknumber"></el-input>
            </el-form-item> -->
            <el-form-item label="开户银行所在地：" prop="bankaddress">
              <el-input v-model="formData3.bankaddress"></el-input>
            </el-form-item>
            <!-- <el-form-item label="开户银行许可证电子版：" prop="banklicenceurl">
              <p style="color: #e6a23c">
                请确保图片清晰，文字可辩并有清晰的红色公章
              </p>

              <el-upload
                class="avatar-uploader"
                :beforeUpload="beforeAvatarUpload"
                :action="uploadUrl"
                :on-change="(file) => handleChange(file)"
                list-type="picture-card"
                :on-success="
                  (response, file, fileList) =>
                    handleSuccess(
                      response,
                      file,
                      fileList,
                      'formData3',
                      'banklicenceurl'
                    )
                "
                :on-remove="
                  (file, fileList) =>
                    handlePicRemove(
                      file,
                      fileList,
                      'formData3',
                      'banklicenceurl'
                    )
                "
                :show-file-list="false"
              >
                <img
                  v-if="formData3.banklicenceurl"
                  :src="formData3.banklicenceurl"
                  class="avatar"
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </el-form-item> -->
            <h3 class="thrTitle">支付宝</h3>

            <el-form-item label="支付宝姓名：">
              <el-input v-model="formData3.alipayname"></el-input>
            </el-form-item>

            <el-form-item label="支付宝账号：">
              <el-input v-model="formData3.alipaynumber"></el-input>
            </el-form-item>
            <h3 class="thrTitle">微信</h3>

            <el-form-item label="微信姓名：">
              <el-input v-model="formData3.wechatname"></el-input>
            </el-form-item>

            <el-form-item label="微信账号：">
              <el-input v-model="formData3.wechatnumber"></el-input>
            </el-form-item>
            <el-form-item v-show="active != 4">
              <el-button style="margin-top: 12px" @click="prev"
                >上一步，{{ titleList[1] }}</el-button
              >
              <el-button style="margin-top: 12px" @click="sunbmitAddFinance"
                >下一步，{{ titleList[3] }}</el-button
              >
            </el-form-item>
          </el-form>
        </li>
        <li v-show="active == 3 || active == 4">
          <el-form
            :model="formData4"
            :rules="rules4"
            style="width: 900px"
            ref="formData4"
            label-width="200px"
            class="demo-ruleForm"
          >
            <h3 class="thrTitle">店铺经营信息</h3>
            <el-form-item label="店铺名称：" prop="storename">
              <el-input
                v-model="formData4.storename"
                class="el-input1"
              ></el-input>
              &nbsp;<span style="color: red">金天合纵商城</span>
            </el-form-item>
            <!-- 下面注释的功能以后会加谁删谁那个 -->
            <!-- <el-form-item label="店铺分类：" prop="name">
                            <el-select v-model="formData4.name" placeholder="请选择店铺分类">
                                <el-option label="店铺分类：" value="店铺分类"></el-option>
                            </el-select>
                        </el-form-item> -->
            <el-form-item label="选择类目：" prop="secondarycategoryid">
              <el-select
                v-model="formData4.topcategoryid"
                @change="getCategory2"
                placeholder="请选择一级类目"
              >
                <el-option
                  v-for="item in topcategoryid"
                  :key="item.topcategoryid"
                  :label="item.topcategoryname"
                  :value="item.topcategoryid"
                ></el-option>
              </el-select>

              <el-select
                v-model="formData4.secondarycategoryid"
                @change="emptyTemplate"
                placeholder="请选择二级类目"
              >
                <el-option
                  v-for="item in secondarycategoryid"
                  :key="item.topcategoryid"
                  :label="item.topcategoryname"
                  :value="item.topcategoryid"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="经营方式：" prop="templatetype">
              <el-select
                v-model="formData4.templatetype"
                @change="getTemplate"
                placeholder="请选择经营方式"
              >
                <el-option
                  v-for="item in operationModeList"
                  :key="item.label"
                  :label="item.name"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <div
              v-if="
                formData4.templatetype != '' && formData4.templatetype != null
              "
            >
              <h3 class="thrTitle">{{ categoryTemplate.name || "" }}</h3>
              <div
                v-for="(item, index) in categoryTemplate.templateItemFormList"
                :key="item.id"
              >
                <!-- 开启校验 -->
                <el-form-item :prop="'fieldname' + index">
                  <span slot="label"
                    ><span style="color: red" v-if="item.ismust == 0">* </span
                    >{{ item.fieldname + "：" }}</span
                  >

                  <input type="hidden" v-model="item.fieldvalue" />
                  <el-input
                    style="width: 90%"
                    v-model="formData4['fieldname' + index]"
                    @change="changeInput(item, index)"
                    v-if="item.fieldtype == '文字'"
                    type="text"
                    :placeholder="'请填写' + item.fieldname"
                  ></el-input>
                  <el-input
                    style="width: 90%"
                    v-model="formData4['fieldname' + index]"
                    @change="changeInput(item, index)"
                    v-if="item.fieldtype == '数字'"
                    type="number"
                    :placeholder="'请填写' + item.fieldname"
                  ></el-input>

                  <el-upload
                    style="width: 80%; display: contents"
                    v-if="item.fieldtype == '图片'"
                    :beforeUpload="beforeAvatarUpload"
                    :action="uploadUrl"
                    :on-success="
                      (response, file, fileList) =>
                        handleSuccess(
                          response,
                          file,
                          fileList,
                          'formData4',
                          'fieldname' + index,
                          index
                        )
                    "
                    :on-remove="
                      (file, fileList) =>
                        handlePicRemove(
                          file,
                          fileList,
                          'formData4',
                          'fieldname' + index,
                          index
                        )
                    "
                    :on-change="(file) => handleChange(file)"
                    list-type="picture-card"
                    :show-file-list="false"
                    class="avatar-uploader"
                  >
                    <img
                      v-if="item.fieldvalue"
                      :src="item.fieldvalue"
                      class="avatar"
                    />
                    <i v-else class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
              </div>
            </div>
            <el-form-item v-show="active != 4">
              <el-button style="margin-top: 12px" @click="prev"
                >上一步，{{ titleList[2] }}</el-button
              >
              <el-button style="margin-top: 12px" @click="sunbmitAddManageInfo"
                >下一步，{{ titleList[4] }}</el-button
              >
            </el-form-item>
          </el-form>
        </li>
        <li v-show="active == 4">
          <el-form label-width="200px">
            <el-form-item>
              <el-button style="margin-top: 12px" @click="prev"
                >上一步，{{ titleList[3] }}</el-button
              >
              <el-button style="margin-top: 12px" @click="submitInfo"
                >信息提交</el-button
              >
            </el-form-item>
          </el-form>
        </li>
        <li v-show="active == 5">
          <div class="waitBox">
            <i class="el-icon-time"></i>
            <span>入驻申请已经提交，请等待管理员审核</span>
          </div>
        </li>
      </ul>
      <!-- 提示窗 -->
      <el-dialog
        title="驳回信息详情"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span>{{ rejectreason }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
// import { areaList } from "../../api/json/areaList.js";
import {
  areaList, // 获取地区三级联动列表 传参provinceid
  settled, // 企业入驻同意协议后提交
  addQualification, // 提交公司资质信息
  addFinance, // 添加公司财务信息
  addManageInfo, // 提交店铺信息
  getSettledInfo, // 核对已填入信息
  getAgreementInfo, // 获取入驻协议
  updateManageInfo, // 核对已填入信息修改接口
} from "../../api/myBusiness/myCertification.js";
import { getTemplateList } from "../../api/buscommodity/buscommodity.js";
import {
  getCommoditySublevelList,
  getCategory,
  getDetailById,
} from "../../api/classification/classification.js";
import { BASE_URL } from "../../config/app";
export default {
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,实际输入的数字总是识别成字符串
        // 所以在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      timer: null, //定时器名称
      disabled: true,
      dialogVisible: false,
      loading: false,
      active: 1,
      certificationstatus: 3, // 审核状态：0.审核中 1.审核通过 2.驳回 默认值3 第一次走入驻协议流程
      titleList: [
        "签订入驻协议",
        "编辑公司资质信息",
        "开户银行信息",
        "店铺经营信息，商品品牌认证",
        "信息提交",
      ],
      activeName: "签订入驻协议",
      agreementChecked: false, // 是否同意开店协议
      uploadUrl: BASE_URL + "/goldendays-currency/tool/uploadpro", //上传图片
      uploadData: [], //[{name:"12",url:"http://localhost/maotianxiaupload/common/2019-08-23/MH1566545692219_mid.jpg"}], // 图片data
      licenseUrl: "",

      formData2: {
        // 第二步表单
        companyname: null, // 公司名称
        province: null, // 省
        city: null, // 市
        county: null, // 区县
        address: null, // 公司详细地址
        email: null, // 公司邮箱
        companyphone: null, // 公司电话
        contactname: null, // 联系人姓名
        contactphone: null, // 联系人电话
        totalstaff: null, // 总人数
        registeredcapital: null, // 注册资金
        businesslicensenumber: null, // 营业执照注册号
        islongterm: null, // 营业执照有效期类型
        businesslicenseindate: "", // 营业执照有效期
        businesslicenseindate1: "", //营业执照开始日期
        businesslicenseurl: null, // 营业执照图片路径
        taxpayercertificateurl: null, // 一般纳税人证明照片
        authorizationcertificate: null, // 授权证明
        enterinfoid: null,
      },
      rules2: {
        companyname: [
          {
            required: true,
            message: "请输入公司名称",
            trigger: "blur",
          },
        ],
        province: [
          {
            required: true,
            message: "请选择公司地址",
            trigger: "blur",
          },
        ],
        city: [
          {
            required: true,
            message: "请选择公司地址",
            trigger: "blur",
          },
        ],
        county: [
          {
            required: true,
            message: "请选择公司地址",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请选择省/市/区县",
            trigger: "blur",
          },
        ],
        email: [{ required: true, validator: checkEmail, trigger: "blur" }],
        companyphone: [
          {
            required: true,
            message: "请输入联系人电话",
            trigger: "blur",
          },
        ],
        contactname: [
          {
            required: true,
            message: "请输入联系人姓名",
            trigger: "blur",
          },
        ],
        contactphone: [
          { required: true, validator: checkPhone, trigger: "blur" },
        ],
        totalstaff: [
          {
            required: true,
            message: "请输入员工人数",
            trigger: "blur",
          },
        ],
        registeredcapital: [
          {
            required: true,
            message: "请输入注册资金",
            trigger: "blur",
          },
        ],
        businesslicensenumber: [
          {
            required: true,
            message: "请输入营业执照号",
            trigger: "blur",
          },
        ],
        islongterm: [
          {
            required: true,
            message: "请选择营业执有效期类型",
            trigger: "blur",
          },
        ],
        // businesslicenseindate: [
        //     {

        //         required: true,
        //         message: "请选择营业执照有效期",
        //         trigger: "change"
        //     }
        // ],
        businesslicenseindate1: [
          {
            required: true,
            message: "请选择营业执照有效期",
            trigger: "change",
          },
        ],
        businesslicenseurl: [
          {
            required: true,
            message: "请上传营业执照电子版",
            trigger: "blur",
          },
        ],
        authorizationcertificate: [
          {
            required: true,
            message: "请上传授权证明",
            trigger: "blur",
          },
        ],
        // taxpayercertificateurl:[
        //     {
        //         required: true,
        //         message: "请上传一般纳税人证明",
        //         trigger: "blur"
        //     }
        // ]
      },
      provinces: [],
      citys: [],
      countys: [],
      formData3: {
        // 第三步表单
        accountname: null, // 公司银行开户名
        accountnumber: null, // 公司银行账号
        affiliatedbanknumber: null, // 公司开户行支行联行号
        alipayname: null, // 支付宝姓名
        alipaynumber: null, // 支付宝账号
        bankaddress: null, // 公司开户行所在地
        banklicenceurl: null, // 开户行许可证电子版url
        enterinfoid: null, // 主键
        subbranchname: null, // 公司开户行支行名称
        wechatname: null, // 微信姓名
        wechatnumber: null, // 微信账号
      },
      rules3: {
        accountname: [
          {
            required: true,
            message: "请输入公司银行开户名",
            trigger: "blur",
          },
        ],
        accountnumber: [
          {
            required: true,
            message: "请输入公司银行账号",
            trigger: "blur",
          },
        ],
        // affiliatedbanknumber: [
        //     {
        //         required: true,
        //         message: "请输入公司开户行支行联行号",
        //         trigger: "blur"
        //     }
        // ],
        alipayname: [
          {
            required: true,
            message: "请输入支付宝姓名",
            trigger: "blur",
          },
        ],
        alipaynumber: [
          {
            required: true,
            message: "请输入支付宝账号",
            trigger: "blur",
          },
        ],
        bankaddress: [
          {
            required: true,
            message: "请输入公司开户行所在地",
            trigger: "blur",
          },
        ],
        // banklicenceurl: [
        //   {
        //     required: true,
        //     message: '请上传开户行许可证电子版',
        //     trigger: 'blur',
        //   },
        // ],
        subbranchname: [
          {
            required: true,
            message: "请输入公司开户行支行名称",
            trigger: "blur",
          },
        ],
        wechatname: [
          {
            required: true,
            message: "请输入微信姓名",
            trigger: "blur",
          },
        ],
        wechatnumber: [
          {
            required: true,
            message: "请输入微信账号",
            trigger: "blur",
          },
        ],
      },
      formData4: {
        // 第四步表单
        storename: "", // 店铺名称
        enterinfoid: null, // 主键
        certificationcontent: null, // 商品分类模板
        topcategoryid: null, // 一级商品分类id
        secondarycategoryid: null, // 二级商品分类id
        categoryid: null, // 三级商品分类id
        templatetype: null, // 商品分类模板 类型 1.生产性 2.分校性 3.零售型
      },
      rules4: {
        storename: {
          required: true,
          message: "请输入店铺名称",
          trigger: "blur",
        },
        secondarycategoryid: {
          required: true,
          message: "请选择商品类目",
          trigger: "blur",
        },
        templatetype: {
          required: true,
          message: "请选择经营方式",
          trigger: "blur",
        },
      },

      // 经营方式
      templatetype: "",
      operationModeList: [
        {
          label: 1,
          name: "供应型",
        },
        {
          label: 2,
          name: "营销型",
        },
        {
          label: 3,
          name: "资源型",
        },
      ],
      initialTemplate: [{ id: null }],
      enterinfoid: null, // 入住流程协议id
      topcategoryid: [], // 一级商品类目
      secondarycategoryid: [], // 二级商品类目
      categoryid: [], // 三级商品类目
      categoryTemplate: {
        name: null,
        templateItemFormList: [],
      }, // 商品类目模板
      settlementAgreement: "", // 入驻协议
      isSubmitType: false,
      formSettled: {
        topcategoryname: null,
        secondarycategoryname: null,
        thirdcategoryname: null,
      },
      rejectreason: null, // 驳回理由
    };
  },

  methods: {
    handleClose(done) {
      done();
      // this.$confirm("确认关闭？")
      //     .then(_ => {
      //         done();
      //     })
      //     .catch(_ => {});
    },
    next() {
      if (this.active == 5) {
        return;
      } else {
        this.active++;
      }
    },
    prev() {
      if (this.active == 0) {
        return;
      } else {
        this.active--;
      }
    },
    //监听多选框的变化值
    // changeCheckbox(){
    //     let that =this
    //    console.log( this.agreementChecked)
    //    setTimeout(that.disabled = true ,3000)
    //    setTimeout(console.log(1111) ,3000)
    // },
    //复选框的禁用标识
    changeCheckbox() {
      this.disabled = false;
    },
    // 图片格式校验
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "jpg" || "JPG";
      const extension2 = testmsg === "png" || "PNG";
      const extension3 = testmsg === "gif" || "GIF";
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: "上传图片只能是 jpg、png、gif格式",
          type: "warning",
        });
      }
      return extension || extension2 || extension3;
    },
    // 图片上传
    handleChange(file) {
      return false;
    },
    //图片上传成功
    handleSuccess(response, file, fileList, index, key, item) {
      if (response.status === 1) {
        this[index][key] = response.data;
        if (item || item == 0) {
          this.categoryTemplate.templateItemFormList[
            item
          ].fieldvalue = this.formData4["fieldname" + item];
        }

        return;
      }
      this.$message.error("上传文件报错");
    },
    // 移除图片
    handlePicRemove(file, fileList, index, key, item) {
      this[index][key] = null;
      if (item || item == 0) {
        this.categoryTemplate.templateItemFormList[item].fieldvalue = null;
      }
    },
    // 编辑财务资质信息提交
    submitFinancialQualification() {
      console.log(this.formData2.islongterm);
      this.$refs["formData2"].validate((valid) => {
        if (valid) {
          this.loading = true;

          // console.log(this.formData2.islongterm)
          this.formData2.enterinfoid = this.enterinfoid;
          // console.log(this.formData2.enterinfoid)

          if (this.formData2.islongterm == 1) {
            this.formData2.businesslicenseindate =
              this.formData2.businesslicenseindate1 + "至" + "长期";
            console.log(this.formData2.businesslicenseindate);
          } else {
            // debugger;
            if (this.formData2.businesslicenseindate == null) {
              this.$message.warning("请选择短期时间");
              this.loading = false;
              return;
            }

            if (this.formData2.businesslicenseindate.constructor === Array) {
              this.formData2.businesslicenseindate =
                this.formData2.businesslicenseindate[0] +
                "至" +
                this.formData2.businesslicenseindate[1];
              console.log(this.formData2.businesslicenseindate);
            } else {
              if (this.formData2.businesslicenseindate.length < 15) {
                //  console.log(this.formData2.businesslicenseindate)
                this.$message.warning("请选择短期时间");
                this.loading = false;
                return;
              }
            }
          }
          localStorage.setItem("list1", JSON.stringify(this.formData2));

          addQualification(this.formData2)
            .then((response) => {
              // console.log(response)
              if (response.code != 0) {
                this.$message.error(response.message);
                this.loading = false;
                return false;
              }
              this.loading = false;
              this.next();
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });

      // this.$refs["ruleForm"].resetFields(); //清除formData表单
      // this.$refs["ruleForm"].clearValidate(); //清除表单验证
    },
    // 提交银行支付宝等信息
    sunbmitAddFinance() {
      this.$refs["formData3"].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.formData3.enterinfoid = this.enterinfoid;
          localStorage.setItem("list2", JSON.stringify(this.formData3));
          addFinance(this.formData3)
            .then((response) => {
              if (response.code != 0) {
                this.$message.error(response.message);
                this.loading = false;
                return false;
              }
              this.loading = false;
              this.next();
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    // 提交店铺信息
    sunbmitAddManageInfo() {
      if (
        this.formData4.templatetype == "" ||
        this.formData4.templatetype == null
      ) {
        this.$message.error("请选择经营模式");
        return false;
      }
      if (this.categoryTemplate.templateItemFormList.length > 0) {
        for (var i in this.categoryTemplate.templateItemFormList) {
          if (
            this.categoryTemplate.templateItemFormList[i].ismust == 0 &&
            this.categoryTemplate.templateItemFormList[i].fieldvalue == null
          ) {
            if (
              this.categoryTemplate.templateItemFormList[i].fieldtype == "图片"
            ) {
              this.$message.error(
                "请上传" +
                  this.categoryTemplate.templateItemFormList[i].fieldname
              );
              return false;
            } else {
              this.$message.error(
                "请填写" +
                  this.categoryTemplate.templateItemFormList[i].fieldname
              );
              return false;
            }
          }
        }
      } else {
        this.$message.error("无商家资质模板，不允许提交");
        return false;
      }

      this.$refs["formData4"].validate((valid) => {
        if (valid) {
          this.formData4.enterinfoid = this.enterinfoid;
          //第三页放到本地
          localStorage.setItem("list3", JSON.stringify(this.formData4));
          let formData = {
            storename: this.formData4.storename,
            enterinfoid: this.formData4.enterinfoid,
            topcategoryid: this.formData4.topcategoryid,
            secondarycategoryid: this.formData4.secondarycategoryid,
            categoryid: this.formData4.categoryid,
            certificationcontent: JSON.stringify(this.categoryTemplate),
            templateType: this.formData4.templatetype,
          };
          // console.log(formData)
          addManageInfo(formData)
            .then((response) => {
              if (response.code != 0) {
                this.$message.error(response.message);
                this.loading = false;
                return false;
              }
              this.loading = false;
              this.next();
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    submitInfo() {
      var formDataType2 = false;
      var formDataType3 = false;
      var formDataType4 = false;
      var formData2 = {};
      var formData3 = {};
      var formData4 = {};
      var data = {};
      // 步骤二 验证
      console.log(this.formData2);
      this.$refs["formData2"].validate((valid) => {
        if (valid) {
          console.log(valid);
          this.formData2.enterinfoid = this.enterinfoid;
          if (this.formData2.islongterm == 1) {
            this.formData2.businesslicenseindate =
              this.formData2.businesslicenseindate1 + "至" + "长期";
            console.log(this.formData2.businesslicenseindate);
          } else {
            if (this.formData2.businesslicenseindate.constructor == Array) {
              console.log(this.formData2.businesslicenseindate);
              this.formData2.businesslicenseindate =
                this.formData2.businesslicenseindate[0] +
                " 至 " +
                this.formData2.businesslicenseindate[1];
            }
          }
          localStorage.setItem("list1", JSON.stringify(this.formData2));
          formData2 = JSON.parse(localStorage.getItem("list1"));
          //this.formData2;
          // console.log("1111111"+formData2)
          formDataType2 = true;

          // 步骤三 验证
          this.$refs["formData3"].validate((valid) => {
            if (valid) {
              this.formData3.enterinfoid = this.enterinfoid;
              formData3 = JSON.parse(localStorage.getItem("list2"));
              //this.formData3;
              console.log(formData3);
              formDataType3 = true;
              if (this.categoryTemplate.templateItemFormList.length > 0) {
                for (var i in this.categoryTemplate.templateItemFormList) {
                  if (
                    this.categoryTemplate.templateItemFormList[i].ismust == 0 &&
                    this.categoryTemplate.templateItemFormList[i].fieldvalue ==
                      null
                  ) {
                    if (
                      this.categoryTemplate.templateItemFormList[i].fieldtype ==
                      "图片"
                    ) {
                      this.$message.error(
                        "请上传" +
                          this.categoryTemplate.templateItemFormList[i]
                            .fieldname
                      );
                      return false;
                    } else {
                      this.$message.error(
                        "请填写" +
                          this.categoryTemplate.templateItemFormList[i]
                            .fieldname
                      );
                      return false;
                    }
                  }
                }
              } else {
                this.$message.error("无商家资质模板，不允许提交");
                return false;
              }
              // 步骤四 验证
              this.$refs["formData4"].validate((valid) => {
                if (valid) {
                  this.formData4.enterinfoid = this.enterinfoid;
                  formData4 = {
                    storename: this.formData4.storename,
                    enterinfoid: this.formData4.enterinfoid,
                    topcategoryid: this.formData4.topcategoryid,
                    secondarycategoryid: this.formData4.secondarycategoryid,
                    categoryid: this.formData4.categoryid,
                    certificationcontent: JSON.stringify(this.categoryTemplate),
                    templatetype: this.formData4.templatetype,
                  };
                  formDataType4 = true;
                  if (formDataType2 && formDataType3 && formDataType4) {
                    data = { ...formData2, ...formData3, ...formData4 };
                    console.log(data);
                    this.updateManageInfo(data);
                  }
                } else {
                  formDataType4 = false;
                }
              });
            } else {
              formDataType3 = false;
            }
          });
        } else {
          formDataType2 = false;
        }
      });
    },
    // 商品分类一级分类
    getCategory1() {
      this.loading = true;
      let data = {
        level: 1,
      };
      getCategory(data)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message);
            return false;
          }
          this.topcategoryid = response.data;
          // console.log(response);
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 商品分类二级分类
    getCategory2(id, sendId) {
      this.loading = true;
      let data = {
        parentid: id,
        level: 2,
      };
      getCategory(data)
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message);
            this.loading = false;
            return false;
          }
          this.secondarycategoryid = response.data || [];
          this.categoryid = [];
          if (sendId) {
            this.editableTabs.sort();
            this.$set(this.formData4, "secondarycategoryid", sendId);
            this.secondarycategoryid = response.data || [];
          } else {
            this.formData4.secondarycategoryid = null;
          }
          this.formData4.categoryid = null;
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 清空经营方式
    emptyTemplate() {
      this.formData4.templatetype = "";
    },
    // 获取模板
    getTemplate() {
      if (
        this.formData4.secondarycategoryid == "" ||
        this.formData4.secondarycategoryid == null
      ) {
        this.$message.error("请选择二级类目");
        return false;
      }
      const formData = new FormData();
      formData.append("templatetype", this.formData4.templatetype);
      formData.append("categoryid", this.formData4.secondarycategoryid);
      getTemplateList(formData)
        .then((response) => {
          if (response.code) {
            this.$message.error(response.message);
            this.loading = false;
          }
          console.info(response.data);
          if (response.data.templateItemFormList.length == 0) {
            this.categoryTemplate = { name: null, templateItemFormList: [] };
            return false;
          }
          // 如果所选模板与已经添加过得模板重合则回显添加过得数据
          if (this.initialTemplate.id == response.data.id) {
            let template = JSON.stringify(this.initialTemplate);
            this.categoryTemplate = JSON.parse(template);
            this.loading = false;
            return false;
          }
          this.categoryTemplate = response.data || {
            name: null,
            templateItemFormList: [],
          };
          response.data.templateItemFormList.forEach((item, index) => {
            let key = "fieldname" + index;
            this.formData4[key] = null;
          });
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 模板input监听
    changeInput(val, i) {
      val.fieldvalue = this.formData4[val.fieldname];
      this.categoryTemplate.templateItemFormList[i].fieldvalue = this.formData4[
        "fieldname" + i
      ];
    },

    // 强制刷新input
    onInput() {
      // this.$forceUpdate();
    },

    // 查询省市县列表
    /*
     * provinceid 上级ID
     * cityRank 查看的城市级别 0 是省级 1 是市级 2 是县级
     */
    areaList(provinceid, cityRank) {
      areaList({ provinceid: provinceid })
        .then((response) => {
          if (response.status != 1) {
            this.$message.error(response.message);
            return false;
          }
          switch (cityRank) {
            case 0: // 省列表
              this.provinces = response.data || []; // 省级列表赋值
              break;
            case 1: // 市列表
              this.formData2.city = null; // 清除已选市
              this.formData2.county = null; // 清除已选县
              this.citys = []; // 清空市类别
              this.countys = []; // 清空县列表
              this.citys = response.data || []; // 市级列表赋值
              break;
            case 2: // 县列表
              this.formData2.county = null; // 清除已选县
              this.countys = []; // 清空县列表
              this.countys = response.data || []; // 县级列表赋值
              break;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 选择省
    selectProvince(item) {
      this.areaList(item.areaid, 1);
      this.formData2.province = this.formData2.province.areaname;
    },
    // 选择市
    selectCity(item) {
      this.areaList(item.areaid, 2);
      this.formData2.city = this.formData2.city.areaname;
    },
    // 选择县
    selectCounty(item) {
      this.formData2.county = this.formData2.county.areaname;
    },
    // 同意协议
    consentGgreement() {
      if (!this.agreementChecked) {
        this.$message.warning("请勾选我已阅读并同意以上协议！！！");
      } else {
        settled()
          .then((response) => {
            if (response.status != 1) {
              this.$message.error(response.message);
              return false;
            }
            this.enterinfoid = response.data.enterinfoid;
            this.formData2 = response.data;
            this.next();
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    getSettledInfo() {
      this.loading = true;
      getSettledInfo()
        .then((response) => {
          if (response.code != 0) {
            console.info(response);
            if (
              response.message == "尚未入住" ||
              response.message == "尚未入驻"
            ) {
              this.active = 0;
              this.loading = false;
              return false;
            }
            this.$message.error(response.message);
            this.active = 0;
            this.loading = false;
            return false;
          }
          console.log(response);
          if (!response.data) {
            this.loading = false;
            return false;
          }
          if (response.data.enterinfoid) {
            this.agreementChecked = true;
          }
          this.enterinfoid = response.data.enterinfoid;
          // 如果是驳回状态 直接在 步骤二开始 如果不是驳回状态 该是啥就是啥
          response.data.certificationstatus != 2
            ? (this.active = response.data.enterstep + 1)
            : (this.active = 1);

          // 是审核状态 0.审核中 1.审核通过 2.驳回 3就是没有状态第一次签订协议
          this.rejectreason = response.data.rejectreason;
          this.certificationstatus =
            response.data.certificationstatus == null
              ? 3
              : response.data.certificationstatus;
          // console.log(this.active);
          // active=5是整个流程全部走过了  certificationstatus=1 是审核被通过 回显所有信息
          // this.active = 3;
          if (this.active == 5 && response.data.certificationstatus == 1) {
            this.formSettled = response.data;
            // 商品类目模板  解析
            this.categoryTemplate = JSON.parse(
              response.data.certificationcontent
            );
            // 商品分类类目回显 把ID变成 文本
            getDetailById({
              topcategoryid: response.data.topcategoryid,
              secondarycategoryid: response.data.secondarycategoryid,
              thirdcategoryid: response.data.categoryid,
            }).then((response) => {
              if (response.code != 0) {
                this.$message.error(response.message);
                return false;
              }
              this.$set(
                this.formSettled,
                "topcategoryname",
                response.data.topcategoryname
              );
              this.$set(
                this.formSettled,
                "secondarycategoryname",
                response.data.secondarycategoryname
              );
              this.$set(
                this.formSettled,
                "thirdcategoryname",
                response.data.thirdcategoryname
              );
            });
          }
          Object.keys(this.formData2).forEach((item) => {
            this.formData2[item] = response.data[item];
          });
          console.info(this.formData2.businesslicenseindate);
          if (this.formData2.businesslicenseindate) {
            let date;
            if (this.formData2.islongterm == 1) {
              // 给定默认日期
              var datelist = this.formData2.businesslicenseindate.split("至");
              if (datelist.length > 0) {
                date = datelist[0];
              }
              this.formData2.businesslicenseindate1 = date;
            } else {
              // 给定默认日期
              date = this.formData2.businesslicenseindate.split("至");
              this.formData2.businesslicenseindate = date;
            }
          } else {
            this.formData2.businesslicenseindate = [null, null];
          }
          if (response.data.topcategoryid) {
            this.getCategory2(
              response.data.topcategoryid,
              response.data.secondarycategoryid
            );
            // this.getCategory3(
            //     response.data.secondarycategoryid,
            //     response.data.categoryid
            // );
          }
          return response;
        })
        .then((response) => {
          Object.keys(this.formData3).forEach((item) => {
            this.formData3[item] = response.data[item];
          });
          Object.keys(this.formData4).forEach((item) => {
            this.formData4[item] = response.data[item];
          });
          this.categoryTemplate = JSON.parse(
            response.data.certificationcontent
          );
          this.initialTemplate =
            JSON.parse(response.data.certificationcontent) || []; // 加入用户添结果模板  记录已填写的模板
          if (
            this.categoryTemplate.templateItemFormList != null &&
            typeof this.categoryTemplate.templateItemFormList != "undefined"
          ) {
            this.categoryTemplate.templateItemFormList.forEach(
              (item, index) => {
                let key = "fieldname" + index;
                this.formData4[key] = item.fieldvalue;
              }
            );
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 获取协议
    getAgreement() {
      getAgreementInfo()
        .then((response) => {
          if (response.code != 0) {
            this.$message.error(response.message);
            this.loading = false;
            return false;
          }
          this.loading = false;
          this.settlementAgreement = response.data;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 信息提交接口，最后一步 可以编辑所有步骤的的信息，进行统一编辑
    updateManageInfo(data) {
      this.loading = true;
      updateManageInfo(data)
        .then(async (response) => {
          if (response.code != 0) {
            this.$message.error(response.message);
            this.loading = false;
            return false;
          }
          this.next();
          this.certificationstatus = 0;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
  },

  filters: {
    getTemplateTyep(type) {
      let templateName = "供应型";
      switch (type) {
        case 1:
          templateName = "供应型";
          break;
        case 2:
          templateName = "营销型";
          break;
        case 3:
          templateName = "资源型";
          break;
        default:
          templateName = "供应型";
          break;
      }
      return templateName;
    },
  },
  created() {
    this.areaList(null, 0); // 全国省查询
    this.getSettledInfo(); // 查询是否提交过入驻协议
    this.getCategory1(); // 查询一级商品类目
    this.getAgreement(); // 查询入驻协议
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("list2")) {
      // this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("list2"))))
      this.formData3 = JSON.parse(localStorage.getItem("list2"));
    }
    if (localStorage.getItem("list2")) {
      this.formData4 = JSON.parse(localStorage.getItem("list3"));
    }

    // //在页面刷新时将vuex里的信息保存到lcoalStorage里
    // window.addEventListener("beforeunload",()=>{
    //     localStorage.setItem("store",JSON.stringify(this.$store.state))
    // })
  },
  mounted() {
    this.timer = setTimeout(this.changeCheckbox, 10000);
  },
  destroyed() {
    clearTimeout(this.timer);
    this.timer = null;
  },
};
</script>

<style scoped lang="scss">
// .main {
//     position: relative;
//     .rebutBtn {
//         position: absolute;
//         left: 50px;
//         top: 0;
//     }
// }
.waitBox {
  height: 60vh;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  font-size: 20px;
  color: #409eff;
  i {
    font-size: 48px;
    margin: 20px;
  }
}
.el-steps {
  width: 1200px;
  margin: 40px auto;
}
.tabsBox {
  width: 1200px;
  margin: auto;
  color: #606266;
  border: 1px solid #dcdfe6;
  .sendTitle {
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin: 50px 0 30px;
  }
  .line {
    margin: 20px 40px;
    border-bottom: 1px solid #dcdfe6;
  }
  .agreementBox {
    width: 80%;
    height: 500px;
    margin: 20px auto;
    border: 1px solid #dcdfe6;
    padding: 2px;
    overflow-y: auto;
    padding: 15px;
    line-height: 24px;
  }
  .thrTitle {
    // width: 200px;
    // text-align: right;
    margin: 20px 0;
    padding-right: 20px;
    padding-left: 20px;
    font-size: 16px;
    font-weight: 600;
  }
  .el-form-item__content div.el-select + div.el-select {
    margin-left: 24px;
  }
}
.imgBox {
  overflow: hidden;
  max-width: 200px;
  height: 150px;
  border-radius: 5px;
  margin: 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  position: relative;
  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  p {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    text-shadow: -1px 1px 1px rgba(255, 255, 255, 0.5);
    color: #fff;
    height: 30px;
    line-height: 30px;

    box-sizing: border-box;
    text-align: center;
  }
  img {
    height: auto;
    max-width: 200px;
    border-radius: 5px;
    margin: auto;
  }
}
form.tabsBox {
  /deep/ .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
}
/deep/.el-upload-list__item.is-ready {
  display: none;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader img {
  width: 148px;
  height: 149px;
}
.el-input1 {
  width: 65%;
}
</style>
